<!DOCTYPE HTML>
<html lang="cn">
<head>
  <title>全局展示</title>
  <base href="${ctxPath}/">
  <script type="text/javascript" src="js/rem.js"></script>
  <link rel="stylesheet" href="css/style2.css">
</head>

<body style="visibility: hidden;">

<div class="container-flex" tabindex="0" hidefocus="true">
  <div class="box-left">
    <div class="left-top">
      <div class="current-num">
        <div class="weather-box">
          <div class="data">
            <p class="time" id="time">00:00:00</p>
            <p id="date"></p>
          </div>
          <div class="weather">
            <img style="width: 30%;height: 50%" id="weatherImg" src="images/weather/weather_img01.png" alt="">

            <div id="weather">
              <p class="active">多云</p>
              <p style="font-size: 12px;">16-22℃</p>
              <p id="baidu">沈河区</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="left-center">
      <div class="title-box">
        <h6>基本信息</h6>
      </div>

      <div class="row" style="margin-right: 0px; margin-left: -11px;">
        <br>
        <div class="col-md-6">
          <div class="row" style="margin-left: 15px;">
            <div class="col-lg-6">
              <p style="color:#eef3e9;font-size: 0.18rem;font-weight:bold;text-align:center;margin-top: 0.04rem;">
                设备总数:</p>
            </div>
            <div class="col-lg-6">
              <div style="color:#21ebf7;font-size: 0.3rem;font-weight:bold;text-align:left">5<b
                      style="color:#21ebf7;font-size: 0.14rem">个</b></div>
            </div>
          </div>
          <br>

        </div>
        <div class="col-md-6">
          <div class="row">
            <div class="col-lg-7">
              <p style="color:#eef3e9;font-size: 0.18rem;font-weight:bold;text-align:center;margin-top: 0.08rem;">
                告警设备:</p>
            </div>
            <div class="col-lg-5">
              <div style="color:#21ebf7;font-size: 0.3rem;font-weight:bold;text-align:left">0<b
                      style="color:#21ebf7;font-size: 0.14rem">个</b></div>
            </div>
          </div>
          <br>

        </div>
      </div>

    </div>
    <div class="left-bottom1">
      <div class="title-box">
        <h6>室内温度对比</h6>
      </div>
      <div class="chart-box pie-chart" style="">
        <div id="qufenbu_data" style="width:100%;height: 120%"></div>
      </div>
    </div>
    <div class="left-bottom2" style="margin-top: 20px;">
      <div class="title-box">
        <h6>室内湿度对比</h6>
      </div>
      <div class="chart-box pie-chart" style="">
        <div id="xuncha_data" style="width:100%;height: 120%"></div>
      </div>
    </div>
  </div>

  <div class="box-center">
    <div class="center-top">
      <h1 style="font-size: 20px;">中科智晟云大脑大数据综合管控平台</h1>
    </div>

    <div class="center-bottom">
      <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4101223987,4268101409&fm=26&gp=0.jpg"
           style="width: 100%;height: 100%">
      <div class="chart-box">


      </div>

    </div>

    <div class="center-bottom1">
      <h1 style="color: #00ff7f">风速实时统计</h1>

    </div>

    <div class="center-bottom2">
      <div class="chart-box2">
        <div id="line_time" style="width:90%;height:2.5rem;margin-left:4%"></div>
      </div>
    </div>


  </div>
  <div class="box-right">
    <div class="right-top">
      <div class="row">
        <div class="">
          <br><br>
          <br>
          <div class="col-lg-4">
            <div style="font-size: 0.24rem; text-align: center;color: #0e94ea;width: 100%;height: 0.3rem;">//温度//
            </div>
            <p style="font-size: 0.28rem;text-align: center; color: #2afa62;"><span style="font-size: 0.3rem"
                                                                                    id="wd"></span>&nbsp;<b
                    style="color:#2afa62;font-size: 0.14rem">℃</b></p>
          </div>
          <div class="col-lg-4">
            <div style="font-size: 0.24rem; text-align: center;color: #0e94ea;">//湿度//</div>
            <p style="font-size: 0.28rem;text-align: center; color: #2afa62;"><span style="font-size: 0.3rem"
                                                                                    id="sd"></span>&nbsp;<b
                    style="color:#2afa62;font-size: 0.14rem">%RH</b></p>
          </div>
          <div class="col-lg-4">
            <div style="font-size: 0.24rem; text-align: center;color: #0e94ea;">//二氧化碳//</div>
            <p style="font-size: 0.28rem;text-align: center; color: #2afa62;"><span style="font-size: 0.3rem"
                                                                                    id="co2"></span>&nbsp;<b
                    style="color:#2afa62;font-size: 0.14rem">CO2</b></p>
          </div>
        </div>

        <div class="">
          <br><br>
          <div class="col-lg-4">
            <div style="font-size: 0.24rem; text-align: center;color: #0e94ea;width: 100%;height: 0.3rem;">//氨气//
            </div>
            <p style="font-size: 0.28rem;text-align: center; color: #2afa62;"><span style="font-size: 0.3rem"
                                                                                    id="aq"></span>&nbsp;<b
                    style="color:#2afa62;font-size: 0.14rem">PPM</b></p>
          </div>
          <div class="col-lg-4">
            <div style="font-size: 0.24rem; text-align: center;color: #0e94ea;">//光照强度//</div>
            <p style="font-size: 0.28rem;text-align: center; color: #2afa62;"><span style="font-size: 0.3rem"
                                                                                    id="gzqd"></span>&nbsp;<b
                    style="color:#2afa62;font-size: 0.14rem">LX</b></p>
          </div>
          <div class="col-lg-4">
            <div style="font-size: 0.24rem; text-align: center;color: #0e94ea;">//风速//</div>
            <p style="font-size: 0.28rem;text-align: center; color: #2afa62;"><span style="font-size: 0.3rem"
                                                                                    id="fs">0.0</span>&nbsp;<b
                    style="color:#2afa62;font-size: 0.14rem">M/s</b></p>
          </div>
        </div>
      </div>
    </div>
    <div class="right-center">

      <div class="title-box">
        <h6>光照强度对比</h6>
      </div>
      <div class="chart-box pie-chart" style="">
        <div id="gzqd_data" style="width:100%;height: 80%"></div>

      </div>
    </div>


    <div class="right-bottom">

      <div class="title-box">
        <h6 id="barTitle">二氧化碳实时展示</h6>
      </div>
      <div id="co2_time2" style="width:90%;height:80%;margin-left:23px;"></div>
    </div>
  </div>
</div>

</body>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/base.js"></script>

<script type="text/javascript">

  /*查询*/
  let promise = new Promise(function (resolve, reject) {
    $.ajax({
      url: "home/findHomeblock.json",
      type: "POST",
      data: {},
      dataType: "json",
      success: function (ret) {
        console.log(ret)
        if (ret) {
          resolve(ret);
        } else {
          alert("网络异常，请稍后再试吧" + JSON.stringify(err))
        }
      },
      error: function (jqXHR, textStatus, errorThrown) {
      }
    });
  });
  promise.then(data => {
    for (var i = 0; i < data.length; i++) {
      if (data[i].datatype == 'co2') {
        console.log("二氧化碳")
        $("#co2").text(data[i].data)
      } else if (data[i].datatype == 'wd') {
        console.log("温度")
        $("#wd").text(data[i].data)
      } else if (data[i].datatype == 'sd') {
        console.log("湿度")
        $("#sd").text(data[i].data)
      } else if (data[i].datatype == 'gzqd') {
        console.log("光照强度")
        $("#gzqd").text(data[i].data)
      } else if (data[i].datatype == 'fs') {
        console.log("风速")
        $("#fs").text(data[i].data)
      } else if (data[i].datatype == 'aq') {
        console.log("氨气")
        $("#aq").text(data[i].data)
      }

    }


    /* var rets = { //数据
       "list": data
     };
     laytpl($("#demo").html()).render(rets, function (html) {
       $("#block").html(html);
     });*/
  });


  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
      alert("浏览器不支持地理定位。");
    }
  }

  function showError(error) {
    console.log(error.code)
  }


  getLocation();

  function showPosition(position) {
    //将我们获取到的经纬度保存到变量中
    var latlon = position.coords.latitude + ',' + position.coords.longitude;

    //baidu接口
    var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location=" + latlon + "&output=json&pois=0"
    $.ajax({
      type: "GET",
      dataType: "jsonp",
      url: url,
      beforeSend: function () {
        $("#baidu").html('正在定位...');
      },
      success: function (data) {

        //alert(JSON.stringify(data))
        if (data.status == 0) {
          $("#baidu").html(data.result.formatted_address);
        }
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        $("#baidu").html(latlon + "地址位置获取失败");
      }
    });
  };


  /*查询*/
  getFloat = function (number, n) {
    n = n ? parseInt(n) : 0;
    if (n <= 0) {
      return Math.round(number);
    }
    number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n); //四舍五入
    number = Number(number).toFixed(n); //补足位数
    return number;
  };
  $('document').ready(function () {

    $("body").css('visibility', 'visible');
    var localData = [$('#teacher').val(), $('#start').val() + '/' + $('#end').val(), $('#leader').val()];
    localStorage.setItem("data", localData);

    $.ajax({
      type: "post",
      async: true, //异步请求
      url: "statistics/stistsetole.jhtml",
      data: {
        poj: 1,
        datatype: "Pie"
      },
      dataType: "json",
      success: function (result) {
        var day = result.day;
        $("#rnh").text(getFloat(day, 2));
        $("#rzb").text(getFloat(day / 1, 2));
        $("#rfy").text(getFloat(day * 1, 2));
      },
      error: function (errorMsg) {
        //请求失败时执行该函数
        //alert("图表请求数据失败!");
      }
    });

    $.ajax({
      type: "post",
      async: true, //异步请求
      url: "statistics/stistsetoler.jhtml",
      data: {
        poj: 1,
        datatype: "ColdHot",
      },
      dataType: "json",
      success: function (result) {
        $("#rnhz").text(getFloat(result.data[0].data, 2));
        $("#rnhzz").text(getFloat(result.data[0].data / 1, 2));
        $("#rnhzzz").text(getFloat(result.data[0].data * 1, 2))
      },
      error: function (errorMsg) {
        //请求失败时执行该函数
        //alert("图表请求数据失败!");
      }
    });

    let qytop = new Promise(function (resolve, reject) {
      $.ajax({
        url: "home/findHomecontainer.json",
        type: "POST",
        data: {},
        dataType: "json",
        success: function (ret) {
          if (ret) {
            resolve(ret);
          } else {
            alert("网络异常，请稍后再试吧" + JSON.stringify(err))
          }
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
      });
    });
    qytop.then(obj => {
      console.log(obj)
      for (var i = 0; i < obj.length; i++) {
        for (const st in obj[i]) {
          if (st == 'co2') {
            var data = [];
            var date = [];
            for (let j = 0; j < obj[i][st].length; j++) {
              data.push(obj[i][st][j].data);
              date.push(obj[i][st][j].Acquisitiontime)
            }
            var co2_data = echarts.init(document.getElementById("co2_time2"), 'infographic');
            var symbolSize = 10;
            option = {
              color: ['#dd3ee5'],
              tooltip: {
                trigger: 'axis'
              },

              dataZoom: [//给x轴设置滚动条
                {
                  start: 0,//默认为0
                  end: 100,//默认为100
                  type: 'slider',
                  show: true,
                  xAxisIndex: [0],
                  handleSize: 0,//滑动条的 左右2个滑动条的大小
                  height: 8,//组件高度
                  left: 50, //左边的距离
                  right: 40,//右边的距离
                  bottom: 26,//右边的距离
                  handleColor: '#ddd',//h滑动图标的颜色
                  handleStyle: {
                    borderColor: "#cacaca",
                    borderWidth: "1",
                    shadowBlur: 2,
                    background: "#ddd",
                    shadowColor: "#ddd",
                  },
                  fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                    //给第一个设置0，第四个设置1，就是垂直渐变
                    offset: 0,
                    color: '#1eb5e5'
                  }, {
                    offset: 1,
                    color: '#5ccbb1'
                  }]),
                  backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
                  showDataShadow: false,//是否显示数据阴影 默认auto
                  showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                  handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                  filterMode: 'filter',
                },
                //下面这个属性是里面拖到
                {
                  type: 'inside',
                  show: true,
                  xAxisIndex: [0],
                  start: 0,//默认为1
                  end: 100 - 1500 / 31,//默认为100
                },
              ],
              legend: {
                padding: [32, 0, 0, 0],
                data: ['二氧化碳'],
                textStyle: {
                  color: '#fft'
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: true,
                data: date,
                axisLabel: {
                  color: "#FADB71" //刻度线标签颜色
                }
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  formatter: '{value} co2',
                  color: "#FADB71"
                }
              },
              series: [
                {
                  name: '二氧化碳',
                  symbolSize: symbolSize,
                  type: 'line',
                  data: data
                }
              ]
            };
            co2_data.setOption(option);
          } else if (st == 'wd') {
            var data = [];
            var date = [];
            for (let j = 0; j < obj[i][st].length; j++) {
              data.push(obj[i][st][j].data);
              date.push(obj[i][st][j].Acquisitiontime)
            }
            var qufenbu_data = echarts.init(document.getElementById("qufenbu_data"), 'infographic');
            var symbolSize = 10;
            option = {
              color: ['#7FFF00'],
              tooltip: {
                trigger: 'axis'
              },

              dataZoom: [//给x轴设置滚动条
                {
                  start: 0,//默认为0
                  end: 100,//默认为100
                  type: 'slider',
                  show: true,
                  xAxisIndex: [0],
                  handleSize: 0,//滑动条的 左右2个滑动条的大小
                  height: 8,//组件高度
                  left: 50, //左边的距离
                  right: 40,//右边的距离
                  bottom: 26,//右边的距离
                  handleColor: '#ddd',//h滑动图标的颜色
                  handleStyle: {
                    borderColor: "#cacaca",
                    borderWidth: "1",
                    shadowBlur: 2,
                    background: "#ddd",
                    shadowColor: "#ddd",
                  },
                  fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                    //给第一个设置0，第四个设置1，就是垂直渐变
                    offset: 0,
                    color: '#1eb5e5'
                  }, {
                    offset: 1,
                    color: '#5ccbb1'
                  }]),
                  backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
                  showDataShadow: false,//是否显示数据阴影 默认auto
                  showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                  handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                  filterMode: 'filter',
                },
                //下面这个属性是里面拖到
                {
                  type: 'inside',
                  show: true,
                  xAxisIndex: [0],
                  start: 0,//默认为1
                  end: 100 - 1500 / 31,//默认为100
                },
              ],
              legend: {
                padding: [32, 0, 0, 0],
                data: ['室内温度'],
                textStyle: {
                  color: '#fft'
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: true,
                data: date,
                axisLabel: {
                  color: "#FADB71" //刻度线标签颜色
                }
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  formatter: '{value} °C',
                  color: "#FADB71"
                }
              },
              series: [
                {
                  name: '室内温度',
                  symbolSize: symbolSize,
                  type: 'line',
                  data: data
                }
              ]
            };
            qufenbu_data.setOption(option);
          } else if (st == 'sd') {
            var data = [];
            var date = [];
            for (let j = 0; j < obj[i][st].length; j++) {
              data.push(obj[i][st][j].data);
              date.push(obj[i][st][j].Acquisitiontime)
            }
            var qufenbu_datass = echarts.init(document.getElementById("xuncha_data"), 'infographic');

            var symbolSize = 10;
            option = {
              color: ['#4962FC'],
              tooltip: {
                trigger: 'axis'
              },
              dataZoom: [//给x轴设置滚动条
                {
                  start: 0,//默认为0
                  end: 100,//默认为100
                  type: 'slider',
                  show: true,
                  xAxisIndex: [0],
                  handleSize: 0,//滑动条的 左右2个滑动条的大小
                  height: 8,//组件高度
                  left: 50, //左边的距离
                  right: 40,//右边的距离
                  bottom: 26,//右边的距离
                  handleColor: '#ddd',//h滑动图标的颜色
                  handleStyle: {
                    borderColor: "#cacaca",
                    borderWidth: "1",
                    shadowBlur: 2,
                    background: "#ddd",
                    shadowColor: "#ddd",
                  },
                  fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                    //给第一个设置0，第四个设置1，就是垂直渐变
                    offset: 0,
                    color: '#1eb5e5'
                  }, {
                    offset: 1,
                    color: '#5ccbb1'
                  }]),
                  backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
                  showDataShadow: false,//是否显示数据阴影 默认auto
                  showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                  handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                  filterMode: 'filter',
                },
                //下面这个属性是里面拖到
                {
                  type: 'inside',
                  show: true,
                  xAxisIndex: [0],
                  start: 0,//默认为1
                  end: 100 - 1500 / 31,//默认为100
                },
              ],
              legend: {
                padding: [26, 0, 0, 0],
                data: ['室内湿度'],
                textStyle: {
                  color: '#fft'
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date,
                axisLabel: {
                  color: "#FADB71" //刻度线标签颜色
                }
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  formatter: '{value} %',
                  color: "#FADB71"
                }
              },
              series: [
                {
                  name: '室内湿度',
                  type: 'line',
                  symbolSize: symbolSize,
                  data:data
                }
              ]
            };

            qufenbu_datass.setOption(option);

          } else if (st == 'gzqd') {
            var data = [];
            var date = [];
            for (let j = 0; j < obj[i][st].length; j++) {
              data.push(obj[i][st][j].data);
              date.push(obj[i][st][j].Acquisitiontime)
            }
            var gzqd_datass = echarts.init(document.getElementById("gzqd_data"), 'infographic');

            var symbolSize = 10;
            option = {
              color: ['#FD9E06'],
              tooltip: {
                trigger: 'axis'
              },
              dataZoom: [//给x轴设置滚动条
                {
                  start: 0,//默认为0
                  end: 100,//默认为100
                  type: 'slider',
                  show: true,
                  xAxisIndex: [0],
                  handleSize: 0,//滑动条的 左右2个滑动条的大小
                  height: 8,//组件高度
                  left: 50, //左边的距离
                  right: 40,//右边的距离
                  bottom: 26,//右边的距离
                  handleColor: '#ddd',//h滑动图标的颜色
                  handleStyle: {
                    borderColor: "#cacaca",
                    borderWidth: "1",
                    shadowBlur: 2,
                    background: "#ddd",
                    shadowColor: "#ddd",
                  },
                  fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                    //给第一个设置0，第四个设置1，就是垂直渐变
                    offset: 0,
                    color: '#1eb5e5'
                  }, {
                    offset: 1,
                    color: '#5ccbb1'
                  }]),
                  backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
                  showDataShadow: false,//是否显示数据阴影 默认auto
                  showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                  handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                  filterMode: 'filter',
                },
                //下面这个属性是里面拖到
                {
                  type: 'inside',
                  show: true,
                  xAxisIndex: [0],
                  start: 0,//默认为1
                  end: 100 - 1500 / 31,//默认为100
                },
              ],
              legend: {
                padding: [26, 0, 0, 0],
                data: ['光照强度'],
                textStyle: {
                  color: '#fft'
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date,
                axisLabel: {
                  color: "#FADB71" //刻度线标签颜色
                }
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  formatter: '{value} LX',
                  color: "#FADB71"
                }
              },
              series: [
                {
                  name: '光照强度',
                  type: 'line',
                  symbolSize: symbolSize,
                  data:data
                }
              ]
            };

            gzqd_datass.setOption(option)
          } else if (st == 'fs') {

          } else if (st == 'aq') {

          }
        }
      }
    })



    var line_time = echarts.init(document.getElementById("line_time"), 'macarons');


    option = {
      //   color: ['#27727B'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#7FFF00'
          }
        }
      },
      dataZoom: [//给x轴设置滚动条
        {
          start: 0,//默认为0
          end: 100,//默认为100
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          handleSize: 0,//滑动条的 左右2个滑动条的大小
          height: 8,//组件高度
          left: 50, //左边的距离
          right: 40,//右边的距离
          bottom: 0,//右边的距离
          handleColor: '#ddd',//h滑动图标的颜色
          handleStyle: {
            borderColor: "#cacaca",
            borderWidth: "1",
            shadowBlur: 2,
            background: "#ddd",
            shadowColor: "#ddd",
          },
          fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
            //给第一个设置0，第四个设置1，就是垂直渐变
            offset: 0,
            color: '#1eb5e5'
          }, {
            offset: 1,
            color: '#5ccbb1'
          }]),
          backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
          showDataShadow: false,//是否显示数据阴影 默认auto
          showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
          handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
          filterMode: 'filter',
        },
        //下面这个属性是里面拖到
        {
          type: 'inside',
          show: true,
          xAxisIndex: [0],
          start: 0,//默认为1
          end: 100 - 1500 / 31,//默认为100
        },
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: true,
          data: datebb,
          axisLabel: {
            color: "#FADB71" //刻度线标签颜色
          }

        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            color: "#FADB71" //刻度线标签颜色
          }
        }
      ],
      series: [
        {
          name: '风速',
          type: 'bar',
          barWidth: '60%',
          data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#06B5D7'},                   //柱图渐变色
                  {offset: 0.5, color: '#44C0C1'},                 //柱图渐变色
                  {offset: 1, color: '#71C8B1'},                   //柱图渐变色
                ]
              )
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#71C8B1'},                  //柱图高亮渐变色
                  {offset: 0.7, color: '#44C0C1'},                //柱图高亮渐变色
                  {offset: 1, color: '#06B5D7'}                   //柱图高亮渐变色
                ]
              )
            }
          }
        }
      ]
    };
    line_time.setOption(option);
  })
</script>

<script>
  Date.prototype.format = function (formatStr) {
    var str = formatStr;
    str = str.replace(/yyyy|YYYY/, this.getFullYear());
    str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1));
    str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate());
    str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours());
    str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes());
    str = str.replace(/ss/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds());
    return str;
  }
</script>


</html>
